<template>
  <div class="container" style="height: 100vh; overflow: hidden;">
    <div class="header" style="padding: 20px ;margin-left: 150px;">
      <img src="imgs/login/bg.png" class="full-screen-logo" alt="Logo">
      <el-container style="padding: 30px">
        <el-header>
          <el-row :gutter="0" style="align-items: center;display:flex; ">
            <el-col :span="2">
              <img src="imgs/login/logo.png" style="height: 75px;display: block;margin-right: 30px">
            </el-col>
            <el-col :span="20">
             <span style="font-weight: bold">
               <h1 class="header-text" style="margin-left: -30px;font-family: '楷体'">达达旅游网</h1>
             </span>
            </el-col>
          </el-row>
        </el-header>
      </el-container>
    </div>
    <el-card class="login-card" style="margin: auto; height: 500px; width: 500px;">
      <h1 class="login-title" style="text-align: center">您好,欢迎登录</h1>
      <el-form label-position="top" class="login-form">
        <el-form-item label="用户名">
          <el-input placeholder="请输入用户名:" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input placeholder="请输入密码:" v-model="user.password" type="password" @keydown.enter="login"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%;" @click="login" >登录</el-button>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="agreeToTerms">我已阅读并同意服务条款和隐私政策</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="text" @click="navigateToRegister">没有账号？去注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

// 新增方法用于处理跳转到注册页面
const navigateToRegister = () => {
  router.push('/reg');
};

const user = ref({
  username:'',
  password:''
});

const agreeToTerms = ref(false);
const login = () => {
  if(!agreeToTerms.value){
    ElMessage.error('请先同意服务条款和隐私政策');
    return;
  }

  axios.post(BASE_URL + '/v1/user/login',user.value).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('登录成功')
      router.push('/');
    } else {
      ElMessage.error(response.data.msg);
      user.value = {username:'',password:''};
    }
  })
}
</script>


<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5; /* 背景颜色 */
}

.login-card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
  backdrop-filter: blur(0.5px); /* 背景模糊效果 */
  border: none;
}

.login-title {
  margin-bottom: 20px;
  color: #333333;
}

.login-form {
  width: 100%;
}

.el-input {
  margin-bottom: 10px;
}

.header-text {
  font-size: 40px;
  color: #333333;
}

.full-screen-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持宽高比并填充整个区域 */
}

.el-button {
  margin-top: 10px;
}
</style>

